<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:body>
	<ui:composition template="/template/template.xhtml">
		<ui:define name="content">
			<h:form id="departmentForm">

				<p:panel id="departmentTablePanel" style="width:100%">
					<p:dataTable id="departmentTable" var="item" paginator="true"
						rows="10"
						paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink}
											{PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
						value="#{mbDepartment.list}" rowKey="#{item.id}"
						selection="#{mbDepartment.selected}" selectionMode="single">

						<p:ajax event="rowSelect" listener="#{mbDepartment.onRowSelect}"
							update=":departmentForm:commandPanel,:departmentForm:tabView">
						</p:ajax>				
						
						<p:column>
							<f:facet name="header">
								<h:outputText value="Mã Khoa" />
							</f:facet>
							<h:outputText value="#{item.depId}" />
						</p:column>

						<p:column>
							<f:facet name="header">
								<h:outputText value="Tên Khoa" />
							</f:facet>
							<h:outputText value="#{item.name}" />
						</p:column>
					</p:dataTable>

					<h:panelGrid id="commandPanel" columns="3">
						<p:commandButton id="addItem" value="Thêm" update=":editItemDlg"
							action="#{mbDepartment.prepareAdd}"
							oncomplete="editItemDlgWidget.show()"></p:commandButton>
						<p:commandButton id="editItem" value="Sửa"
							action="#{mbDepartment.prepareEdit}" update=":editItemDlg"
							disabled="#{mbDepartment.editMode == false}"
							oncomplete="editItemDlgWidget.show()"></p:commandButton>
						<p:commandButton id="deleteItem" value="Xóa"						
							onclick="confirmation.show()"
							
							disabled="#{mbDepartment.editMode == false}">
						</p:commandButton>
					</h:panelGrid>
				</p:panel>

				<p:confirmDialog id="confirmDialog"
					message="Bạn Có Chắc Muốn Xóa?" width="250"
					header="Xác nhận xóa" severity="alert"
					widgetVar="confirmation">

					<p:commandButton id="confirm" value="Đồng Ý" update="departmentTable,commandPanel"
						oncomplete="confirmation.hide()"
						actionListener="#{mbDepartment.doDelete}" />
					<p:commandButton id="decline" value="Không Đồng Ý"
						onclick="confirmation.hide()" type="button" />

				</p:confirmDialog>

				<p:panel id="tabPanel" style="width:100%" autoUpdate="true">
					<p:tabView id="tabView" dynamic="false" cache="false">
						<p:tab title="Chuyên Ngành" id="majorTab">
							<ui:include src="/faces/department/major.xhtml" />
						</p:tab>

						<p:tab title="Môn Học" id="courseTab">
							<ui:include src="/faces/department/courses.xhtml" />
						</p:tab>

						<p:tab title="Lớp Học" id="classTab">
							<ui:include src="/faces/department/class.xhtml" />
						</p:tab>

					</p:tabView>
				</p:panel>
			</h:form>

			<script type="text/javascript">
				function handleDepartmentRequest(xhr, status, args) {
					if (args.validationFailed) {
						jQuery('#editItemDlgWidget').effect("shake", {
							times : 3
						}, 100);
					} else {
						editItemDlgWidget.hide();
					}
				}
			</script>


			<p:growl id="growl" showDetail="true" sticky="true" />
			<p:dialog id="editItemDlg"
				header="#{mbDepartment.editMode == true ? 'Sửa Thông Tin Khoa' : 'Thêm Khoa Mới'}"
				minWidth="500" widgetVar="editItemDlgWidget" resizable="false">
				<p:ajax event="close" update=":departmentForm:departmentTablePanel"
					listener="#{mbDepartment.handleClose}" />
				<h:form id="editForm">
					<p:messages id="messages" showDetail="true" autoUpdate="true"
						showSummary="false" />
					<h:panelGrid columns="2" style="margin-bottom:10px">
						<h:outputLabel for="id" value="Mã Khoa(*) " />
						<p:inputText id="id" value="#{mbDepartment.item.depId}"
							required="true" label="Mã Khoa" size="50" />

						<h:outputLabel for="majorName" value="Tên Khoa " />
						<p:inputText id="majorName" value="#{mbDepartment.item.name}"
							required="true" label="Tên Khoa" size="50" />

						<p:commandButton id="submitButton" value="Lưu"
							action="#{mbDepartment.doAdd}"
							update=":departmentForm:departmentTablePanel, :departmentForm:commandPanel"
							oncomplete="handleDepartmentRequest(xhr, status, args)" />
					</h:panelGrid>
				</h:form>
			</p:dialog>

			<script type="text/javascript">
				function handleMajorRequest(xhr, status, args) {
					if (args.validationFailed) {
						jQuery('#editMajorDlgWidget').effect("shake", {
							times : 3
						}, 100);
					} else {
						editMajorDlgWidget.hide();
					}
				}
			</script>

			<p:dialog id="editMajorDlg"
				header="#{mbDepartment.majorSelected != null ? 'Sửa Thông Tin Chuyên Ngành' : 'Thêm Chuyên Ngành Mới'}"
				minWidth="500" widgetVar="editMajorDlgWidget" resizable="false">
				<p:ajax event="close" update=":departmentForm:tabPanel"
					listener="#{mbDepartment.handleMajorWindowClose}" />
				<h:form id="editMajorForm">
					<p:messages id="messages" showDetail="true" autoUpdate="true"
						showSummary="false" />
					<h:panelGrid columns="2" style="margin-bottom:10px">
						<h:outputLabel for="id" value="Mã Chuyên Ngành(*) " />
						<p:inputText id="id" value="#{mbDepartment.major.majorId}"
							required="true" label="Mã Chuyên Ngành" size="50"
							requiredMessage="Xin hãy nhập mã chuyên ngành." />
						<h:outputLabel for="majorName" value="Tên Chuyên Ngành(*)" />
						<p:inputText id="majorName" value="#{mbDepartment.major.name}"
							required="true" size="50"
							requiredMessage="Xin hãy nhập tên chuyên ngành." />

						<h:outputLabel value="Khoa:" for="depId" />
						<p:inputText id="depId" value="#{mbDepartment.major.depId}"
							disabled="true" required="true" label="Tên Khoa" size="50" />

						<p:commandButton id="submitButton" value="Lưu"
							action="#{mbDepartment.doAddMajor}"
							update=":departmentForm:tabPanel"
							oncomplete="handleMajorRequest(xhr, status, args)" />
					</h:panelGrid>
				</h:form>
			</p:dialog>


			<script type="text/javascript">
				function handleCourseRequest(xhr, status, args) {
					if (args.validationFailed) {
						jQuery('#editCourseDlgWidget').effect("shake", {
							times : 3
						}, 100);
					} else {
						editCourseDlgWidget.hide();
					}
				}
			</script>

			<p:dialog id="editCourseDlg"
				header="#{mbDepartment.courseSelected != null ? 'Sửa Thông Tin Môn Học' : 'Thêm Môn Học Mới'}"
				minWidth="500" widgetVar="editCourseDlgWidget" resizable="false">
				<p:ajax event="close" update=":departmentForm:tabPanel"
					listener="#{mbDepartment.handleCourseWindowClose}" />
				<h:form id="editCourseForm">
					<p:messages id="messages" showDetail="true" autoUpdate="true"
						showSummary="false" />
					<h:panelGrid columns="2" style="margin-bottom:10px">

						<h:outputLabel for="id" value="Mã Môn Học(*) " />
						<p:inputText id="id" value="#{mbDepartment.course.courseId}"
							required="true" label="Mã Môn Học" size="50"
							requiredMessage="Xin hãy nhập mã môn học" />

						<h:outputLabel for="name" value="Tên Môn Học(*) " />
						<p:inputText id="name" value="#{mbDepartment.course.name}"
							required="true" label="Tên Môn Học" size="50"
							requiredMessage="Xin hãy nhập tên môn học" />


						<h:outputLabel for="depId" value="Khoa(*) " />
						<p:inputText size="50" value="#{mbDepartment.course.depId}"
							required="true" id="depId" disabled="true">
						</p:inputText>

						<h:outputLabel for="major" value="Chuyên Ngành " />
						<p:selectOneMenu style="width:350px"
							value="#{mbDepartment.course.majorId}" required="false"
							id="major">
							<f:selectItem itemLabel="Chọn..." itemValue="" />
							<f:selectItems value="#{mbDepartment.majorMap}" />
						</p:selectOneMenu>

						<h:outputLabel for="semester" value="Thuộc Học Kỳ(*) " />
						<p:selectOneMenu style="width:350px"
							value="#{mbDepartment.course.semester}" required="false"
							id="semester">
							<f:selectItem itemLabel="Chọn..." itemValue="" />
							<f:selectItem itemLabel="Học Kỳ 1" itemValue="1" />
							<f:selectItem itemLabel="Học Kỳ 2" itemValue="2" />
							<f:selectItem itemLabel="Học Kỳ 3" itemValue="3" />
							<f:selectItem itemLabel="Học Kỳ 4" itemValue="4" />
							<f:selectItem itemLabel="Học Kỳ 5" itemValue="5" />
							<f:selectItem itemLabel="Học Kỳ 6" itemValue="6" />
							<f:selectItem itemLabel="Học Kỳ 7" itemValue="7" />
							<f:selectItem itemLabel="Học Kỳ 8" itemValue="8" />
						</p:selectOneMenu>

						<h:outputText value="Là Môn Bắt Buộc? " for="isrequired" />
						<p:selectBooleanCheckbox id="isrequired"
							value="#{mbDepartment.course.isrequired}" />

						<h:outputLabel for="theoryUnit" value="Số Tín Chỉ Lý Thuyết" />
						<p:inputText id="theoryUnit"
							value="#{mbDepartment.course.theoryUnit}" required="false"
							label="Số Tín Chỉ Lý Thuyết" size="50" />

						<h:outputLabel for="practiseUnit" value="Số Tín Chỉ Thực Hành" />
						<p:inputText id="practiseUnit"
							value="#{mbDepartment.course.practiseUnit}" required="false"
							label="Số Tín Chỉ Thực Hành" size="50" />

						<h:outputText value="Kiểm Tra Giữa Kỳ? " for="isMidTest" />
						<p:selectBooleanCheckbox id="isMidTest"
							value="#{mbDepartment.course.isMidTest}" />

						<h:outputText value="Đồ Án Môn Học? " for="isEssays" />
						<p:selectBooleanCheckbox id="isEssays"
							value="#{mbDepartment.course.isEssays}" />

						<h:outputText value="Thi Cuối Kỳ? " for="isFinalTest" />
						<p:selectBooleanCheckbox id="isFinalTest"
							value="#{mbDepartment.course.isFinalTest}" />

						<p:commandButton id="submitButton" value="Lưu"
							action="#{mbDepartment.doAddCourse}"
							update=":departmentForm:tabPanel"
							oncomplete="handleCourseRequest(xhr, status, args)" />
					</h:panelGrid>

				</h:form>
			</p:dialog>

			<script type="text/javascript">
				function handleClassRequest(xhr, status, args) {
					if (args.validationFailed) {
						jQuery('#editClassDlgWidget').effect("shake", {
							times : 3
						}, 100);
					} else {
						editClassDlgWidget.hide();
					}
				}
			</script>

			<p:dialog id="editClassDlg"
				header="#{mbDepartment.clazzSelected != null ? 'Sửa Thông Tin Lớp Học' : 'Thêm Lớp Học Mới'}"
				minWidth="500" widgetVar="editClassDlgWidget" resizable="false">
				<p:ajax event="close" update=":departmentForm:tabPanel"
					listener="#{mbDepartment.handleClassWindowClose}" />
				<h:form id="editClassForm">
					<p:messages id="messages" showDetail="true" autoUpdate="true" />
					<h:panelGrid columns="2" style="margin-bottom:10px">
						<h:outputLabel for="id" value="Mã Lớp(*) " />
						<p:inputText id="id" value="#{mbDepartment.clazz.clazzId}"
							required="true" label="Mã Chuyên Ngành" size="50" />

						<h:outputLabel for="majorName" value="Tên Lớp " />
						<p:inputText id="majorName" value="#{mbDepartment.clazz.name}"
							required="true" label="Tên Lớp" size="50" />

						<h:outputLabel value="Khoa:" for="depId" />
						<p:inputText id="depId" value="#{mbDepartment.clazz.depId}"
							disabled="true" required="true" label="Mã Khoa" size="50" />

						<p:commandButton id="submitButton" value="Lưu"
							action="#{mbDepartment.doAddClass}"
							update=":departmentForm:tabPanel"
							oncomplete="handleClassRequest(xhr, status, args)" />
					</h:panelGrid>
				</h:form>
			</p:dialog>
		</ui:define>

	</ui:composition>

</h:body>

</html>